<template>
  <div class="home">
    <van-nav-bar title="家庭图书管理系统" />
    <div class="stats">
      <van-cell-group>
        <van-cell title="图书总数" :value="stats.bookCount" />
        <van-cell title="在读图书" :value="stats.readingCount" />
        <van-cell title="已读图书" :value="stats.finishedCount" />
      </van-cell-group>
    </div>
    
    <div class="recent-books">
      <h3>最近阅读</h3>
      <van-list>
        <van-cell
          v-for="book in recentBooks"
          :key="book.id"
          :title="book.title"
          :label="book.author"
          is-link
          @click="goToBookDetail(book.id)"
        >
          <template #right-icon>
            <van-progress
              :percentage="book.progress"
              stroke-width="4"
              :show-pivot="false"
            />
          </template>
        </van-cell>
      </van-list>
    </div>
    
    <van-tabbar v-model="activeTab" @change="onChangeTab">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="goToSearch">搜索</van-tabbar-item>
      <van-tabbar-item icon="add-o" @click="goToAddBook">添加</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="goToProfile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const activeTab = ref(0)
    
    // 模拟数据
    const stats = ref({
      bookCount: 128,
      readingCount: 5,
      finishedCount: 86
    })
    
    const recentBooks = ref([
      { id: 1, title: 'Vue.js设计与实现', author: '霍春阳', progress: 65 },
      { id: 2, title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', progress: 30 },
      { id: 3, title: '重构：改善既有代码的设计', author: 'Martin Fowler', progress: 90 }
    ])
    
    const goToBookDetail = (id) => {
      router.push(`/book/${id}`)
    }
    
    const goToSearch = () => {
      router.push('/search')
    }
    
    const goToAddBook = () => {
      router.push('/scan')
    }
    
    const goToProfile = () => {
      router.push('/profile')
    }
    
    const onChangeTab = (index) => {
      // tab切换处理
    }
    
    return {
      activeTab,
      stats,
      recentBooks,
      goToBookDetail,
      goToSearch,
      goToAddBook,
      goToProfile,
      onChangeTab
    }
  }
}
</script>

<style scoped>
.stats {
  margin: 10px;
}

.recent-books {
  margin: 10px;
}

.recent-books h3 {
  text-align: left;
  margin-bottom: 10px;
}
</style>